<template>
    <div>


      <div class="demo-nav">
        <div class="demo-nav__title">客服中心</div>
        <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
          <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
        </svg>
      </div>


      <div v-for="list in telList" style="border-radius: 50px;height: 1.5rem;background-color: aquamarine">


        <p style="margin: 1rem 0rem 0rem 0rem">一键拨号询问<span style="margin: 0rem 1rem 0rem 0rem">：</span><a :href="'tel:' + list.telPhone" rel="external nofollow" >{{list.telPhone}}</a></p>
        <meta name="format-detection" content="telephone=yes" />


      </div>

    </div>
</template>

<script>
  import { terraceList } from "@/api/customer/terracetel";

  export default {
        name: "terraceTel",
      data(){
          return{
            telPhone: '18333151858',
            telList:[],
          }
      },
    created() {
      this.getList();
    },

    methods: {

      //返回上一层
      toBack(){
        this.$router.go(-1);
      },
      getList(){
        terraceList().then(res=>{
          this.telList = res.data;

        })
      }
    }

    }
</script>

<style scoped>
  .demo-nav{
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 45px;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 12px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
</style>
